<template>
  <div class="container">
    <div>
      <h3>{{ groupDetails.courseGroupName }}修改</h3>
    </div>
    <table>
      <tr>
        <th>
          <span>课程名：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openCourseList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            {{ tableData.courseName }}</el-button
          >
        </th>
      </tr>
      <tr>
        <th>
          <span>课程组名称：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openCourseGroupList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            {{ tableData.courseGroupName }}
          </el-button>
        </th>
      </tr>
      <tr>
        <th>
          <span>课程组组长名称：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openCourseGroupLeaderList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            {{ tableData.courseGroupLeaderName }}
          </el-button>
        </th>
      </tr>
      <tr
        v-for="(member, index) in tableData.groupMember"
        :key="'member' + index"
      >
        <th>
          <span>课程组组员名称：</span>
        </th>
        <th>
          <el-button
            type="text"
            @click="openCourseGroupMemberList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            {{ member.teacherName }}
          </el-button>
        </th>
      </tr>
      <tr>
        <th></th>
        <th>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary" @click="reset">还原</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </th>
      </tr>
    </table>

    <!-- 课程筛选 -->
    <el-dialog title="选择课程" :visible.sync="openCourseList">
      <el-input placeholder="请输入关键字" v-model="courseKeyword">
        <template slot="prepend"
          >课程名</template
        >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchCourseListByKeyword"
        ></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="courseSelect">
        <el-radio
          v-for="(course, index) in courseList"
          :key="'course' + index"
          :label="course"
          >{{ course.name }}</el-radio
        >
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseSelect = ''">清 空</el-button>
        <el-button type="primary" @click="openCourseList = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 课程组筛选 -->
    <el-dialog title="选择课程组" :visible.sync="openCourseGroupList">
      <el-input placeholder="请输入关键字" v-model="courseGroupKeyword">
        <template slot="prepend"
          >课程组名</template
        >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchCourseGroupByKeyword"
        ></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="courseGroupSelect">
        <el-radio
          v-for="(courseGroup, index) in courseGroupList"
          :key="'courseGroup' + index"
          :label="courseGroup"
          >{{ courseGroup.name }}</el-radio
        >
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseGroupSelect = ''">清 空</el-button>
        <el-button type="primary" @click="openCourseGroupList = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 课程组长筛选 -->
    <el-dialog title="选择课程组长" :visible.sync="openCourseGroupLeaderList">
      <el-input placeholder="请输入关键字" v-model="courseGroupLeaderKeyword">
        <template slot="prepend"
          >课程组长姓名</template
        >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchGroupLeaderListByKeyword"
        ></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="courseGroupLeaderSelect">
        <el-radio
          v-for="(courseGroupLeader, index) in courseGroupLeaderList"
          :label="courseGroupLeader"
          :key="'tcg' + index"
          >{{ courseGroupLeader.name }}</el-radio
        >
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseGroupLeaderSelect = ''">清 空</el-button>
        <el-button type="primary" @click="openCourseGroupLeaderList = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "groupUpdate",
  props: {
    groupDetails: Object
  },
  data() {
    return {
      //表格数据赋初始值
      tableData: {
        courseName: this.groupDetails.courseName, //课程名
        courseGroupName: this.groupDetails.courseGroupName, //课程组名
        courseGroupLeaderName: this.groupDetails.courseGroupLeaderName, //课程组组长名
        groupMember: this.groupDetails.groupMember //组员
      },

      openCourseList: false, //显示课程筛选对话框
      courseKeyword: "", //课程搜索关键词
      courseSelect: "", //选择的课程
      courseList: [], //课程列表

      openCourseGroupList: false, //显示课程组筛选对话框
      courseGroupKeyword: "", //课程组搜索关键词
      courseGroupSelect: "", //选择的课程组
      courseGroupList: [], //课程组列表

      openCourseGroupLeaderList: false, //显示课程组组长筛选对话框
      courseGroupLeaderKeyword: "", //课程组组长搜索关键词
      courseGroupLeaderSelect: "", //先择的课程组组长
      courseGroupLeaderList: [], //课程组组长列表

      openCourseGroupMemberList: false, //显示课程组组员筛选对话框
      courseGroupMemberKeyword: "", //课程组组员搜索关键词
      courseGroupMemberSelect: "", //选择的课程组组员
      teachList: [] //教师列表
    };
  },
  created() {
    //获取课程列表
    this.getCourseList();
    //获取课程组列表
    this.getCourseGroup();
    //获取课程组组长列表
    this.getCourseGroupLeaderList();
    //获取教师列表
    this.getTeacherList();
  },
  methods: {
    //获取课程列表
    getCourseList() {
      this.courseList = [
        { id: "001", name: "Python程序设计" },
        { id: "002", name: "java程序设计" },
        { id: "003", name: "C语言程序设计" }
      ];
    },

    //获取课程组列表
    getCourseGroup() {},

    //获取课程组组长列表
    getCourseGroupLeaderList() {
      this.courseGroupLeaderList = [
        { id: "001", name: "鲁昊" },
        { id: "002", name: "廖森" },
        { id: "003", name: "志健" }
      ];
    },

    //获取教师列表
    getTeacherList() {
      this.teacherList = [
        { id: "201724113132", name: "鲁昊" },
        { id: "201724113102", name: "志健" },
        { id: "201724113127", name: "廖森" }
      ];
    },

    //根据关键词搜索课程
    searchCourseListByKeyword() {},

    //根据关键词搜索课程组
    searchCourseGroupByKeyword() {},

    //根据关键词搜索课程组组长名
    searchGroupLeaderListByKeyword() {},

    //修改提交
    update() {
      this.$alert("修改课程组信息", "修改成功", {
        confirmButtonText: "确定",
        callback: action => {
          console.log(this.tableData);
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        }
      });
    },

    //还原
    reset() {
      this.tableData.courseName = this.groupDetails.courseName; //课程名
      this.tableData.courseGroupName = this.groupDetails.courseGroupName; //课程组名
      this.tableData.courseGroupLeaderName = this.groupDetails.courseGroupLeaderName; //课程组组长名
      this.tableData.groupMember = this.groupDetails.groupMember; //组员
    },

    //返回
    back() {
      this.$emit("closeUpdate", false);
    }
  }
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
</style>
